<%--
  Created by IntelliJ IDEA.
  User: Elle
  Date: 2022/7/9
  Time: 8:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>学校机房管理系统</title>
</head>
<style>
    div{
        text-align: center;
        width: 600px;
    }
    table{
        width: 600px;
        border: 1px solid;
    }
</style>
<body>
<div>
    <h1>学校机房管理系统</h1>
    <a href="#“">添加机房</a>
    <div id="add">
        <form id="myform">
            <p>机房名称：<input type="text" name="roomName"> </p>
            <p>计算机数量：<input type="text" name="computerNumber"> </p>
            <p>
                <input type="button" value="添加" onclick="add()">
            </p>
        </form>
    </div>
    <table id="list">
        <tr>
            <th>序号</th>
            <th>机房名称</th>
            <th>计算机数量</th>
            <th>机房管理员</th>
            <th>机房位置</th>
            <th>机房状态</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${requestScope.list}" var="tmp">
            <tr>
                <td>${tmp.roomId}</td>
                <td>${tmp.roomName}</td>
                <td>${tmp.computerNumber}</td>
                <td>${tmp.manager}</td>
                <td>${tmp.location}</td>
                <td>
                    <c:choose>
                        <c:when test="${tmp.state==1}">使用</c:when>
                        <c:when test="${tmp.state==2}">空闲</c:when>
                        <c:when test="${tmp.state==3}">维护</c:when>
                    </c:choose>
                </td>
                <td>
                    <c:choose>
                        <c:when test="${tmp.state==1}"><a href="#">空闲</a></c:when>
                        <c:otherwise><a href="#">使用</a></c:otherwise>
                    </c:choose>
                    <a href="javascript:void(0)" onclick="del(this,${tmp.roomId})">删除</a>
                </td>
            </tr>
        </c:forEach>
    </table>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
    //添加
    function add(){
        //使用ajax提交表单元素
        $.getJSON("AddServlet",$('#myform').serialize(),function(data){ //data任意写，用于接收后台响应的结果==》print()中打印的数据
            console.log(data);
            console.log(data.roomName+" "+data.computerNumber);
            //创建标签，添加到表格中
            var tr = $("<tr></tr>");
            tr.append("<td>"+data.roomId+"</td>");
            tr.append("<td>"+data.roomName+"</td>");
            tr.append("<td>"+data.computerNumber+"</td>");
            tr.append("<td>"+data.manager+"</td>");
            tr.append("<td>"+data.location+"</td>");
            tr.append("<td>"+data.state+"</td>");
            tr.append("<td>"+data.roomId+"</td>");
            $("#list").append(tr);
        });
    }

    function addAjax(){
        //使用ajax提交表单元素
        $.ajax({
            url:'AddServlet',  //请求的路径
            type:'post', //方式：get/post
            data:$('#myform').serialize(), //参数：表单
            dataType:'json', //响应的结果类型：text、json、xml、html
            success:function(data){ //data任意写，用于接收后台响应的结果==》print()中打印的数据
                console.log(data);
                console.log(data.roomName+" "+data.computerNumber);
                //创建标签，添加到表格中
                var tr = $("<tr></tr>");
                tr.append("<td>"+data.roomId+"</td>");
                tr.append("<td>"+data.roomName+"</td>");
                tr.append("<td>"+data.computerNumber+"</td>");
                tr.append("<td>"+data.manager+"</td>");
                tr.append("<td>"+data.location+"</td>");
                tr.append("<td>"+data.state+"</td>");
                tr.append("<td>"+data.roomId+"</td>");
                $("#list").append(tr);
            },
            error:function(){}
        });
    }


    function del(obj,id) {
        var bool = confirm("确认是否删除吗？");
        if(!bool){
            return ;
        }
        //使用ajax
        $.post('DelServlet',
            'id='+id,
            function(data){ //data任意写，用于接收后台响应的结果==》print()中打印的数据
                if(data == '1'){ //删除成功
                    alert('删除成功');
                    $(obj).parents("tr").remove();
                }
            });
    }

    function delAjax(obj,id) {
        console.log(id);
        //询问一下是否删除
        var bool = confirm("确认是否删除吗？");
        if(bool){
            $.ajax({
                url:'DelServlet',  //请求的路径
                type:'get', //方式：get/post
                data:'id='+id, //参数
                dataType:'text', //响应的结果类型：text、json、xml、html
                success:function(data){ //data任意写，用于接收后台响应的结果==》print()中打印的数据
                    if(data == '1'){ //删除成功
                        alert('删除成功');
                        $(obj).parents("tr").remove();
                    }
                },
                error:function(){}
            });

        }
    }
</script>

</body>
</html>
